import React from 'react'
import {Modal, Form, Input, Button} from 'antd'

export default function AddEventModal({visible, close, addEvent}) {

  

  function add(values) {
    const name = values.name
    const event = {id: Math.floor(Math.random() * 10000), name}
    addEvent(event)
    cancel()
  }

  function cancel() {
    close()
  }

  const tailLayout = {
    wrapperCol: {
      offset: 4,
    },
  }

  return (
    <Modal
      title="新增事件"
      destroyOnClose={true}
      footer={null}
      visible={visible}
      onCancel={cancel}>
      
      <Form name="event" onFinish={add}>

        <Form.Item label="事件名称" name="name" rules={[{ required: true, message: '请输入事件名称' }]}>
          <Input />
        </Form.Item>

        <Form.Item {...tailLayout}>
          <Button htmlType="submit" type="primary">保存</Button>
        </Form.Item>
      </Form>

    </Modal>
  )
}
